<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据与方法</title>
</head>
<body>

<!--<div id="app">-->
<!--    <p>{{foo}}</p>-->
<!--    <button v-on:click="foo = 'baz'">改变foo</button>-->
<!--</div>-->

<div id="example">
    {{a}}
</div>

<script src="../js/vue.js"></script>
<script>
    //数据对象【如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。】
    // var data = {
    //     a: 1,
    //     newTodoText: '',
    //     hideCompletedTodos: false,
    //     todos: [],
    //     error: null
    // }

    //使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
    // var obj = {
    //     foo: 'bar'
    // }
    //
    // Object.freeze(obj) //这句一定要放在Vue实例前，不然不起作用
    //
    // //加入Vue实例
    // var vm = new Vue({
    //     el: '#app',
    //     data: obj
    // })

    //【除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。】
    var data = {a: 1}
    var vm = new Vue({
        el: '#example',
        data: data
    })

    vm.$watch('a',function (newValue , oldVale){
        console.log('a值改变了');
        console.log('从' + oldVale + '改成了' + newValue )
    })

    // console.log(vm.a == data.a) //ture
    // vm.a = 2
    // console.log(data.a) //2
    //
    // //反之亦然
    // data.a = 3
    // console.log(vm.a) //3
</script>
</body>
</html>